<table class="table table-striped add-edit-table" id="datatable-editable">
    <thead>
        <tr>
            <th>Owner</th>
            <th>Strategy Name</th>
            <th>Strategy Type</th>
            <th>Frequency</th>
            <th>Input</th>
            <th>Output</th>
            <th>Source Path</th>
            <th>Actions</th>
        </tr>
    </thead>
 
    <tbody id="metaDataTables">
        <tr class="gradeU">
            <td>Hasaki</td>
            <td>Franchise Invest</td>
            <td>选股</td>
            <td>年</td>
            <td>\\192.168.89.200\research\Research\Hasaki\财报</td>
            <td><a href="#">Display.html</a></td>
            <td><a href="#">link</a></td>
            <td class="actions">
                <a href="#" class="on-default edit-row" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fa fa-pencil"></i></a>
                <a href="#" class="on-default remove-row" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash-o"></i></a>
                <a href="#" class="hidden on-editing save-row" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save"><i class="fa fa-save"></i></a>
                <a href="#" class="hidden on-editing cancel-row" data-toggle="tooltip" data-placement="top" title="" data-original-title="Cancel"><i class="fa fa-times"></i></a>
            </td>
        </tr>
    </tbody>
</table>

<script>
function creatTable(data){
    // data example : []
    var tableData="<tr class='gradeA'>"
    // actions是固定的
    var actions="<td class='actions'>"
    actions+="<a href='#' class='on-default edit-row' data-toggle='tooltip' data-placement='top' title='' data-original-title='Edit'><i class='fa fa-pencil'></i></a>"
    actions+="<a href='#' class='on-default remove-row' data-toggle='tooltip' data-placement='top' title='' data-original-title='Delete'><i class='fa fa-trash-o'></i></a>"
    actions+="<a href='#' class='hidden on-editing save-row' data-toggle='tooltip' data-placement='top' title='' data-original-title='Save'><i class='fa fa-save'></i></a>"
    actions+="<a href='#' class='hidden on-editing cancel-row' data-toggle='tooltip' data-placement='top' title='' data-original-title='Cancel'><i class='fa fa-times'></i></a>"
    actions+="</td>"

    for(var i=0;i<data.length;i++){
     tableData+="<td>"+data[i]+"</td>"
    }
    tableData+=actions
    tableData+="</tr>"
    return tableData
    
}

$(function (){
    // Owner | Strategy Name | Strategy Type | Frequency | Input | Output | Source Path | Actions
    // var testData=["Robin","基于差分视角下的价量互动关系（二）","选股","月度","\\170.20.6.250/SyncHK/Research/Refinitiv/Data/JQData",
    // "<a href='\\\\192.168.89.200/research/Research/Research/strategy_results/基于差分视角下的价量互动关系（二）.html'>基于差分视角下的价量互动关系（二）.html</a>'"
    // ,"<a href='#'>link</a>"]
    var finalMetaData=""
    axios
    .get(metaDataTableAddress)
    .then(response=>{
        // 返回[[],[],...]
        for (var l of response.data.list){
            console.log("----->",l)
            single_tr=creatTable(l)
            finalMetaData+=single_tr
        }
        //现在finalMetaData已经生成好了，把他赋值给上面的tbody
        $("#metaDataTables").html(finalMetaData)
    })
    
})
</script>